<template>
  <rt-view>
    <rt-header>
      <rt-navbar>
        <rt-search
          v-focus
          v-model="name"
          placeholder="搜索"
          @on-search="onSearch()"
        ></rt-search>
      </rt-navbar>
      <rt-tabs
        class="class-tabs"
        v-model="buttontab"
        :tab-list="tabList"
        :select-color="selectColor"
        :color="color"
        :border-width="borderWidth"
        :listen-scroll="true"
        @on-item-click="tabsChange"
      />
    </rt-header>
    <rt-content ref="content">
        <rt-list v-if="type === '2'" ref="articalList" :fetch="fetch" @toggle="toggle">
          <!--文章列表-->
          <div
            slot-scope="{ row }"
            class="list_content"
            @click="clickToArticleDetail(row)"
          >
            <div class="desc">
              <div class="tille">{{ row.object_name }}</div>
              <div class="footer">
                {{ row.readnum }} 阅读 . {{ row.commentnum }} 评论
              </div>
            </div>
            <div class="imgs">
              <img :src="showRemotePic(row.avatar)" @error="showErrorPic($event)"/>
            </div>
          </div>
        </rt-list>
        <!--活动列表-->
        <rt-list v-else ref="articalList" :fetch="fetch" @toggle="toggle">
          <div
            slot-scope="{ row }"
            class="account-item"
            @click="clickToCampaignDetail(row)"
          >
            <div class="card-content">
              <div class="top-img-title">
                <div class="img-info">
                  <img :src="showRemotePic(row.avatar)" @error="showErrorPic($event)"/>
                </div>
                <div class="title-info">
                  {{ row.object_name }}
                </div>
              </div>
              <div class="account-content">
                <div v-if="row.start_time !== ''&& row.start_time !== null">
                  <div class="img-svg">
                    <img src="../../assets/imgs/time.png" />
                  </div>
                  <!--<div class="new_time">
                    {{ row.start_time | moment('YYYY.MM.DD HH:mm') }}-{{
                      row.end_time | moment('HH:mm')
                    }}
                  </div>-->
                  <div class="new_time" v-if="(row.start_time !== ''&& row.start_time !== null)?(row.start_time.substr(0,10) === row.end_time.substr(0,10)):true">
                    {{ row.start_time | moment('YYYY-MM-DD HH:mm') }}至{{
                    row.end_time | moment('HH:mm')
                    }}
                  </div>
                  <div class="new_time" v-else>
                    {{ row.start_time | moment('YYYY-MM-DD') }}至{{
                    row.end_time | moment('MM-DD')
                    }}
                  </div>
                </div>
                <div v-if="row.province !== ''&& row.province !== null">
                  <div class="img-svg">
                    <img src="../../assets/imgs/location.png" />
                  </div>
                  <div class="new_address" >
                    {{ row.province }}{{ row.city }}{{ row.area
                    }}{{ row.address }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </rt-list>
    </rt-content>
  </rt-view>
</template>

<script>
export default {
  name: 'OpendLogList',
  filters: {
    nameStyle(value) {
      if (!value) return '';
      if (value.length > 15) {
        return value.slice(0, 15) + '...';
      }
      return value;
    }
  },
  data() {
    return {
      type: '1',
      userId: '',
      pageIndex: 0,
      name: '',
      borderWidth: '10px',
      color: '#888',
      selectColor: '#53A4FC',
      buttontab: 0,
      tabList: [{ name: '活动' }, { name: '文章' }]
    };
  },
  created() {},
  methods: {
    fetch(page) {
      return this.getDataList(page).then(resp => {
        /*if (this.pageIndex > 1) {
          this.pageIndex = 0;
          return [];
        }*/
        this.pageIndex++;
        return resp;
      });
    },
    getDataList(page) {
      return new Promise(resolve => {
        const data = {
          type: this.type,
          pageIndex: page.pageIndex,
          pageSize: page.pageSize,
          name: this.name
        };
        rt.get(`/api/bbs/openedlog/opendlist`, data)
          .then(res => {
            resolve(res);
          })
      });
    },
    tabsChange(val) {
      this.type = val === 0 ? '1' : '2';
      this.$refs['articalList'].refreshData();
    },
    //点击进入到文章详情
    clickToArticleDetail(row) {
      var param = {
        object_id: row.object_id,
        object_name: row.object_name
      };
      rt.get(`/api/bbs/article/detail/${row.object_id}`)
        .then(res => {
          if (res.bbs_article_status === '2') {
            rt.post(`/api/bbs/openedlog/saveopenlog/article`, param)
              .then(res => {
                this.$router.push({
                  name: 'article-detail',
                  query: {
                    id: row.object_id,
                    name: row.object_name
                  }
                });
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            rt.alert('哎呀，文章丢掉啦');
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //点击进入活动详情
    clickToCampaignDetail(row) {
      rt.get(`/api/bbs/campaign/detail/${row.object_id}`)
        .then(res => {
          if (res.bbs_campaign_status === '2') {
            this.$router.push({
              name: 'campaign-detail',
              query: { id: row.object_id }
            });
          } else {
            rt.alert('哎呀，活动丢掉啦');
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    showRemotePic(path){
      return rt.showRemotePic(path);
    },
    showErrorPic(e){
      rt.showErrorPic(e);
    },
    onSearch() {
      this.$refs['articalList'].refreshData(1);
    },
    toggle(showHeader) {
      this.showHeader = showHeader;
      this.$refs.content.resizeStyle();
    }
  }
};
</script>

<style lang="less" scoped>
.account-item {
  padding: 0 10px;
  margin: 5px auto 10px;
  .card-content {
    background-color: #ffffff;
    width: 100%;
    border-radius: 10px;
    box-shadow:2px 2px 6px 2px rgba(20,62,129,0.1);
    text-align: center;
    .top-img-title {
      .img-info {
        border-radius: 10px 10px 0 0;
        position: relative;
        height: 163px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px 10px 0 0;
          margin: 0 auto;
        }
      }
      .title-info {
        /*bottom: 50px;*/
        /*position: relative;*/
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-weight: bold;
        /*color: #fff;*/
        text-align: left;
        font-size: 17px;
        padding: 10px 15px 0 20px;
      }
    }
  }
  .account-content {
    margin: 10px 0 10px 20px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
    .img-svg {
      width: 16px;
      height: 16px;
      float: left;
      margin-right: 5px;
      margin-top: -0.8px;
    }
    .new_time {
      color: #555;
      font-size: 13px;
      padding-bottom: 5px;
    }
    .new_address {
      color: #555;
      padding-bottom: 10px;
      font-size: 13px;
    }
  }
}
</style>
